//邮箱找回密码
import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    TextInput
} from 'react-native';

import { rtopeditStyle as styles1 } from '../../../../styles';
import { retrieveStyle as styles } from '../../../../styles';
import Icon from 'react-native-vector-icons/Ionicons';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

export default class Validate extends Component {
    state = {
        show1: true,
        show2: true,
    }
    _onPress() {
        this.refs.password.blur();
    }
    render() {
        return (
            <View style={[styles.retrall, { backgroundColor: '#ffffff', flex: 1 }]}>
                <View style={[styles1.rtopin, {
                    width: width * 1,
                    elevation: 5,
                    shadowColor: 'black',
                    shadowOpacity: 1,
                    shadowRadius: 5
                }]}>

                    <TouchableOpacity activeOpacity={1} style={styles1.rtopicon1} onPress={() => { this.props.navigation.goBack() }}>
                        <Icon
                            name={'ios-arrow-back'}
                            size={25}
                            color={'#ffffff'} />
                    </TouchableOpacity>
                    <Text style={styles1.rtoptext}>找回密码</Text>
                </View>

                <View style={styles.input1}>
                    <TextInput style={[styles.inputin, { width: width * 0.85 }]}
                        placeholder="输入手机号"
                        underlineColorAndroid="transparent" />
                </View>


                <View style={styles.input2}>
                    <TextInput style={[styles.inputin, { width: width * 0.85 }]} underlineColorAndroid="transparent"
                        placeholder="请输入验证码" />
                    <TouchableOpacity style={styles.repbout} activeOpacity={1}>
                        <Text style={styles.repbutton}>发送验证码</Text>
                    </TouchableOpacity>
                </View>


                <View style={styles.input2}>
                    <TextInput style={[styles.inputin, { width: width * 0.85 }]} ref="password"
                        placeholder="请输入新密码（6-16位字母、数字）" password={true}
                        //输入为密码隐藏样式
                        secureTextEntry={this.state.show2}
                        clearButtonMode="always"
                        underlineColorAndroid="transparent" />

                    <TouchableOpacity style={styles.look} activeOpacity={1}
                        onPressIn={() => { [this.setState({ show2: !this.state.show2 }), this._onPress()] }}
                        onPressOut={() => { this.setState({ show2: !this.state.show2 }) }}>
                        <Icon
                            name={'md-eye'}
                            size={22}
                            color={'#aeaeae'} />
                    </TouchableOpacity>
                </View>



                <TouchableOpacity activeOpacity={1} style={[styles.buttonall, {
                    width: width * 0.85, elevation: 3,
                    shadowColor: 'black',
                    shadowOpacity: 1,
                    shadowRadius: 5
                }]} onPress={() => { this.props.navigation.navigate('Validate') }}>
                    <Text style={styles.button1}>完成</Text>
                </TouchableOpacity>
                

            </View>
        )
    }

}